﻿<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-itunes-app" content="app-id=591578609">
<meta name="viewport" content="width=device-width"/>
<meta name="description" content="筑学堂网校" />
<meta name="keywords" content="筑学堂网校、建筑、考试"/>
<link href="http://www.zhuclass.com/img/icon.ico" type="image/x-icon" rel="icon"  />
<link href="http://www.zhuclass.com/img/icon.ico" type="image/x-icon" rel="shortcut icon"  />
<link rel="stylesheet" type="text/css" href="../../style/share/style.css">
<link rel="stylesheet" type="text/css" href="../../style/share/kczx.css">
<link rel="stylesheet" type="text/css" href="../../style/share/home_style.css">
<link rel="stylesheet" type="text/css" href="../../style/user.css">

<script type="text/javascript" src="../js/home.js"></script>
<script type="text/javascript">
	var globalVar = {
		expertPageNum : 1,
		expertHasNext : null,
		resource_id : '',
		resource_name : '',
		currentScore : 0,
		allCommentDiv : null,
		goodCommentDiv : null,
		middleCommentDiv : null,
		negativeCommentDiv : null
	};
	
	$(function(){
		globalVar.expertHasNext = '${shareExpertNext}';
		globalVar.resource_id = '${resource.resource_id}';
		globalVar.resource_name = '${resource.file_name}';
		globalVar.allCommentDiv = $('#tab3001');
		globalVar.goodCommentDiv = $('#tab3002');
		globalVar.middleCommentDiv = $('#tab3003');
		globalVar.negativeCommentDiv = $('#tab3004');
		//globalVar.expertPageNum = 1;
		loadComments();
		$('#publish_comment_a').click(function(){
			publishComment();
		});
	});
	
	function publishComment(){
		var $comment = $('#comment_input');
		var commentText = $comment.val();
		$.ajax({
			 url : 'teamgroup/getHeadImg/${userId}/null',
			 type : 'post',
	 	   	 dataType : 'json',
	 	   	 success : function(d,status){
	 	   		 var data = {
	 	   			 referenceId : "${data.id}",
	 				 content : commentText,
	 				 author : {"identity":d.uid, "name":d.uname},
	 				 commentType : 'group'//,
	 				// score : globalVar.currentScore
	 			 };
	 	   		doPublishComment(data,d.himg);
	 	   	 },
	 	   	 error : function(d){}
		});	
	}
	
	//执行发布评论
	function doPublishComment(data,himg){
		$.ajax({
			 url : '/api/v1/comment',
			 type : 'post',
			 contentType : 'application/json',
			 headers: {
	            "Accept" : "text/plain; charset=utf-8",
	            "Content-Type": "application/json; charset=utf-8"
	        },
			 data : JSON.stringify(data),
		   	 //dataType : 'json',
		   	 success : function(d,status){
		   		 //alert(d);
		   		 $('#comment_input').val('');
		   		 var commentData = {
		   			_id : d,
		   			author : {"identity": data.author.identity,"name": data.author.name},
		   			content : data.content,
		   			score : data.score,
		   		 };
		   		appendComment(commentData,true,himg);
		   		//appendComment(d,data.author.identity,data.author.name,himg,data.score,data.content,new Date().format('yyyy-MM-dd hh::mm::ss'),true,null);
		   	 },
	   	 	error : function(d){}
		});
	}
	function loadComments(){
		$.ajax({
			 url : '/api/v1/comment/host/${data.id}?type=group',
			 type : 'get',
		   	 success : function(d,status){
		   		 //alert(d);
		   		 var data = $.parseJSON(d);
		   		 //var html = [];
		   		 $.each(data,function(i,item){
		   			//appendComment(item._id,item.author.identity,item.author.name,null,item.score,item.content,item.createTime.$date,false,item.comments);
		   			appendComment(item,false,null);
		   		 });
		   		 //$('#tab3001').append(html.join(''));
		   	 },
		   	 error : function(d){}
		});
	}
	//往评论列表增加评论
	function appendComment(commentData,first,authorHImg){
		var _id = commentData._id;
		var authorid= commentData.author.identity;
		var authorName = commentData.author.name;
		var score = commentData.score;
		var html = '<div class="weibo_article" name="commentContainer-'+_id+'">'+
				'<div style="height:10px;width:700px;position:relative;float:left;"></div>'+
			 	'<div class="tab30003'+_id+'">'+
				'<div class="weibo_art0102">'+
					'<div class="tab3040103"><img src=src="${drmFilePath}cdrmimg/'+authorHImg+'?w=50&h=50'+'" name="headImg-'+_id+'"> <a href="#"><span class="retext05">'+commentData.author.name+'</span></a>：'+commentData.content+''+
						'<div class="weibo_art0103"> '+commentData.createTime.$date+''+
							'<div class="weibo_art0104"> <a href="javascript:void(0)"  name="replyBut-'+_id+'" style="color:#2884b3;"> 回复 </a> &nbsp;|&nbsp; <a href="javascript:void(0)"> 删除 </a> </div>'+
						'</div>'+
					'</div>'+
					'<div class="weibo_re00" style="height:10px"></div>'+
				'</div></div></div>';
		 if(first) globalVar.allCommentDiv.prepend(html); else globalVar.allCommentDiv.append(html);
		 globalVar.allCommentDiv.find('a[name=replyBut-'+_id+']').click(function(){ replyCommentEvent(1,_id,_id,authorid,authorName);  });
		 fillReplyComments(1,_id,commentData.comments);
		 
		if(authorHImg != null && authorHImg != ''){
			$('img[name=headImg-'+_id+']').attr('src','${drmFilePath}cdrmimg/'+authorHImg+'?w=50&h=50');
		} else {
			$.ajax({
				 url : '/share/resource/getHeadImg/'+authorid+'/'+_id,
				 type : 'post',
		  	   	 dataType : 'json',
		  	   	 success : function(d,status){
		  	   		 //alert('get head'+d.himg);
		  	   		 if(d.himg != ''){
		  	   		$('img[name=headImg-'+d.comment_id+']').attr('src','${drmFilePath}cdrmimg/'+d.himg+'?w=50&h=50');
		  	   		 }
		  	   	 },
		  	   	 error : function(d){}
			});
		}
	}

	function showReply(type,author,replyAuthorId,reviewer,content,hostid,_id,himg,fid){
		var $container = getPanelDivByType(type);
		var html='<div class="weibo_re00" style="height:10px"></div>'
			+'<div class="weibo_re00">'
			+'<div class="tab30003'+_id+'">'
			+'	<div class="weibo_art0101"> <a href="#"> <img src="${drmFilePath}cdrmimg/'+himg+'?w=50&h=50'+'"></a> </div>'
			+'	<div class="weibo_re01"> <span style="color:#1E579C"> <a href="#" style="color:#1E579C">'+author+'</a>：</span>'+content
			+'		<div class="weibo_re02"> 2014-08-30'
			+'			&nbsp;&nbsp; <a style="color:#2884b3;" onclick="replyCommentEvent(\''+type+'\',\''+hostid+'\',\''+_id+'\',\''+replyAuthorId+'\',\''+reviewer+'\')" name="replyBut-'+_id+'">回复</a> </div>'
			+'	</div>'
			+'</div>'
			+'</div>';
		//$('[name='+namediv+']').append(html); 
		var $tmp = $container.find('div.tab30003'+fid);
		$tmp.append(html);
		//$container.find('div[name=commentContainer-'+hostid+'] .tab30003').append(html);
	}
	
	//根据type得到页签
	function getPanelDivByType(type){
		var $container;
		if(type == 1) $container=globalVar.allCommentDiv;
		else if(type == 2) $container=globalVar.goodCommentDiv;
		else if(type == 3) $container=globalVar.middleCommentDiv;
		else if(type == 4) $container=globalVar.negativeCommentDiv;
		return $container;
	}
	
	function doReplyComment(type,hostid,_id,authorid,authorName){	 
		var $input = $('#replyInput-'+_id);
		var commentText = $input.val();
		$.ajax({
			 url : '/share/resource/getHeadImg/0/null',
			 type : 'post',
		   	 dataType : 'json',
		   	 success : function(d,status){
		   		 //alert(JSON.stringify(d));
		   		 var data = {
		   			 referenceId : hostid,
					 content : commentText,
					 author : {"identity":d.uid, "name":d.uname},
					 commentType : 'resource',
					 object : {"identity":authorid, "name":authorName}
				  };
		   		 //alert(data.author.identity);
		   		 var replyAuthorName = d.uname;
		   		 var replyAuthorId = d.uid;
		   		 var replyHImg = d.himg;
		   		 $.ajax({
			   		 url : '/api/v1/comment',
			   		 type : 'post',
			   		 contentType : 'application/json',
			   		 headers: {
			               "Accept" : "text/plain; charset=utf-8",
			               "Content-Type": "application/json; charset=utf-8"
			           },
			   		 data : JSON.stringify(data),
			      	 //dataType : 'json',
			      	 success : function(d,status){
			      		// alert('success:'+d);
			      		var $replyDiv = $('div[name=replyDiv-'+_id+']');
			      		showReply(type,authorName,replyAuthorId,replyAuthorName,commentText,hostid,d,replyHImg,_id);
			      		//$input.remove();
			      		$replyDiv.remove();
			      		 //var data = JSON.parseJSON(d);
			      	 },
			      	 error : function(d){}
			   	});
		   	 },
		   	 error : function(d){}
		});	
	}
	
	//回复点击事件
	function replyCommentEvent(type,hostid,_id,authorid,authorName){
		//alert('replyCommentEvent');
		var $container = getPanelDivByType(type);	
		var $replyDiv = $container.find('[name=replyDiv-'+_id+']');
		/*if($replyDiv.length > 0){
			$replyDiv.each(function(){
			  $(this).val("");
			 });
			$replyDiv.show();
		} else */
		if($replyDiv.length < 1){
			$container.find('[name=commentContainer-'+hostid+']').append('<div class="tab30004" name="replyDiv-'+_id+'" style="display:block">'+
						'<input type="text" style="width:590px;height:70px;padding:0px;" id="replyInput-'+_id+'">'+
						'<a href="javascript:void(0);" onclick="doReplyComment(\''+type+'\',\''+hostid+'\',\''+_id+'\',\''+authorid+'\',\''+authorName+'\')" name="replyBut-'+_id+'">'+
						'<div class="tab30005"> 发&nbsp;表 </div>'+
						'</a> </div>');
			var $inputs = $("div[name^='replyDiv-'][name!=replyDiv-"+_id+"]");
			//alert($inputs.length);
			$inputs.remove();
		}
	}
	
	//填充回复的评论列表
	function fillReplyComments(type,_id,replyComments){
		var $container = getPanelDivByType(type);
		var $commentDiv = $container.find('div[name=commentContainer-'+_id+'] .tab30003');
		//alert('1' == 1);
		if(replyComments){
			$.each(replyComments,function(i,item){
				$commentDiv.append('<div class="tab305">'+
								'<div class="tab3050101"> <img src="${image.server}/images/user02.jpg" name="headImg-'+item._id+'"> </div>'+
								'<div class="tab3050102">'+
									'<div class="tab3050103"> <a href="#"><span class="retext05">'+item.author.name+'</span></a>回复 <a href="#"><span class="retext05">'+item.object.name+'</span></a>'+
										'<div class="tab305010301"> <a href="javascript:void(0);" onclick="replyCommentEvent(\''+type+'\',\''+_id+'\',\''+item._id+'\',\''+item.author.identity+'\',\''+item.author.name+'\')" name="replyBut-'+item._id+'" style="color:#2884b3;">回复</a> </div>'+
									'</div>'+
									'<div class="tab3050104">'+item.content+'</div>'+
									'<div class="tab3050105">'+item.createTime.$date+'</div>'+
								'</div>'+
							'</div>');
				$.ajax({
					 url : '/share/resource/getHeadImg/'+item.author.identity+'/'+item._id,
					 type : 'post',
			  	   	 dataType : 'json',
			  	   	 success : function(d,status){
			  	   		 //alert('get head'+d.himg);
			  	   		 if(d.himg != ''){
			  	   			$('img[name=headImg-'+d.comment_id+']').attr('src','${drmFilePath}cdrmimg/'+d.himg+'?w=50&h=50');
			  	   		 }
			  	   	 },
			  	   	 error : function(d){}
				});
			});
		}
	}
	
	//编辑
	function editTopic(topic_id){
		   $.ajax({ url: "../group_topic_edit_query/${topic_id}", 
		       success: function(result){
	           $("#mainPageDiv").html(result);
	        }
	       });
	}
	
</script>
<title>筑学堂家园个人空间</title>
<style type="text/css">
a {
	color:#222;
	text-decoration:none;
}

a:link {
	cursor:pointer;
	text-decoration:none;
}


a:hover {
	color:#888;
	cursor:pointer;
}

li {
	list-style-type:none;
}
</style>
</head>
<body style="align:center; padding:0;margin:0;clear:both; background-color:FFF;">
     <div class="home_groupnotice">
				<div class="home_grnottit" style="margin-bottom:20px;"> 群话题 </div>
				
				<div class="blog_list" style="width:97%;">
				<div class="blog_list01"  style="width:97%;">
					<div class="blog_rtitle"> ${data.topic_nm} <span class="blog_rtitle01"> (2014-09-12&nbsp;&nbsp;11:11) </span> <span class="blog_rtitle01"> &nbsp;&nbsp; 
					<c:if test="${topicCreater == 1 || creater == 1}">
						<a href="#" onclick="editTopic('${data.id}')"> [编辑] </a>&nbsp;
					</c:if>
					<!-- <a href="#"  onclick="deleteTopic('${data.id}')"> [删除] </a>  --> </span> </div>
					<div class="blog_rtab" style="width:98%;"> 作者： <a href="#">${data.create_nm}</a> </div>
					<div class="blog_article" style="width:98%;">
						${data.topic_txt}
					</div>
					<div class="blog_end"> <a href="#"> 阅读(${data.view_cnt}) </a> ┆ <a href="#"> 评论(${data.reply_cnt}) </a>  </div>
				</div>
				<c:if test="${creater == 1 || member == 1}">
					<div class="blog_rtop" style="overflow:hidden;clear:both;width:97%;margin-top:80px;">
						<div class="blog_title"> 评论 </div>
					</div>
					<div class="blogadd_review">
						<textarea class="blogreview_detail" id="comment_input"> </textarea>
						<div class="blogreview_add" style="width:440px;">
						<a href="#" onclick="publishComment()">
							<div class="blogadd_textadd" style="position:relative;
		float:right;background-color:#357C7A;"> 发表评论 </div>
							</a> 
						 <span style="font-size:14px;">还可以输入140字</span> </div>
					</div>
				</c:if>
				<div class="weibo_arti" id="tab3001">
				</div>
			</div>
</body>
</html>